<script setup lang="ts">
import * as echarts from 'echarts';
import { onMounted, ref, reactive } from 'vue';
import { userService } from '../../../../api/user';
import { PieChartOutlined } from '@ant-design/icons-vue';

const pieChart = ref<HTMLElement>();
const myChart1 = ref<any>();

const infectious =async () => {
  const response = await userService.infectious()
  statistic.all = response.data.userCount
  statistic.infect = response.data.infectious
  statistic.jiHui = response.data.jiHui
  statistic.feiYan = response.data.feiYan
  statistic.baiRiKe = response.data.baiRiKe
  statistic.liuNao = response.data.liuNao
  statistic.feiJieHe = response.data.feiJieHe
  console.log(statistic)
}
const statistic = reactive({
  all:0, infect:0, jiHui:0, feiYan:0, baiRiKe:0, liuNao:0, feiJieHe:0
})

//绘制PieChart
function initPieChart(){
  myChart1.value = echarts.init(pieChart.value!);
  myChart1.value.setOption({
    title:{
      text:'传染病类型',
      left:'center'
    },
    tooltip:{
      trigger:'item',
      confine:true
    },
    legend:{
      orient:'vertical',
      left:'left'
    },
    series:[
      {
        name:'疾病类型',
        type:'pie',
        radius:'50%',
        data:[
          {value: statistic.jiHui, name:'脊髓灰质炎'},
          {value: statistic.feiJieHe, name:'肺结核'},
          {value: statistic.liuNao, name:'流行性乙型脑炎'},
          {value: statistic.baiRiKe, name:'百日咳'},
          {value: statistic.feiYan, name:'肺炎'}
        ],
        emphasis:{
          itemstyle:{
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  });
}

onMounted(() => {
  infectious();
});
</script>

<template>
  <div ref="pieChart" id="pieChart"> </div>

  <PieChartOutlined style="font-size: 350%; position: absolute; top: 115px; right: 20px;" @click="initPieChart()"/>

  <a-row class="InfectNum1">
    <a-col :span="25">
      <a-statistic title="总病例数" :value="statistic.all"/>
    </a-col>
  </a-row>
  <a-row class="InfectNum2">
    <a-col :span="25">
      <a-statistic title="检出例数" :value="statistic.infect" />
    </a-col>
  </a-row>

</template>

<style scoped>
  .InfectNum1{
    position: absolute;
    top: 115px;
    left: left;
    /*style="margin-right: 50px"*/
  }
  .InfectNum2{
    position: absolute;
    top: 115px;
    left: 30%;
    /*style="margin-right: 50px"*/
  }

  #pieChart{
    background-color: white;
    width: 550px;
    height: 400px;
    top: 60px;
    left: 25%;
    /*resize: both;*/
  }
</style>